<template>
	<view class="comment">
		<view class="header">{{comment.total+"条评论"}}</view>
		<view class="commentItem" v-for="commentItem in comment.list" :key="commentItem.commentid">
			<image class="avatar" :src="commentItem.userinfo.avatar" mode="widthFix"></image>
			<view class="commentItem-info">
				<view class="head">
					<view class="head-left">
						<view class="user-name">{{commentItem.userinfo.username}}</view>
						<text class="send-time">{{sendTime(commentItem.addtime)}}</text>
					</view>
					<view class="head-right">
						<svg t="1639051478440" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="2332" width="16" height="16">
							<path
								d="M757.76 852.906667c36.906667-0.021333 72.832-30.208 79.296-66.56l51.093333-287.04c10.069333-56.469333-27.093333-100.522667-84.373333-100.096l-10.261333 0.085333a19972.266667 19972.266667 0 0 1-52.842667 0.362667 3552.853333 3552.853333 0 0 1-56.746667 0l-30.997333-0.426667 11.498667-28.8c10.24-25.642667 21.76-95.744 21.504-128.021333-0.618667-73.045333-31.36-114.858667-69.290667-114.410667-46.613333 0.554667-69.461333 23.466667-69.333333 91.136 0.213333 112.661333-102.144 226.112-225.130667 225.109333a1214.08 1214.08 0 0 0-20.629333 0l-3.52 0.042667c-0.192 0 0.64 409.109333 0.64 409.109333 0-0.085333 459.093333-0.490667 459.093333-0.490666z m-17.301333-495.914667a15332.288 15332.288 0 0 0 52.693333-0.362667l10.282667-0.085333c84.010667-0.618667 141.44 67.52 126.72 150.250667L879.061333 793.813333c-10.090667 56.661333-63.68 101.696-121.258666 101.76l-458.922667 0.384A42.666667 42.666667 0 0 1 256 853.546667l-0.853333-409.173334a42.624 42.624 0 0 1 42.346666-42.730666l3.669334-0.042667c5.909333-0.064 13.12-0.064 21.333333 0 98.176 0.789333 182.293333-92.437333 182.144-182.378667C504.469333 128.021333 546.24 86.186667 616.106667 85.333333c65.173333-0.768 111.68 62.506667 112.448 156.714667 0.256 28.48-6.848 78.826667-15.701334 115.050667 8.021333 0 17.28-0.042667 27.584-0.106667zM170.666667 448v405.333333h23.466666a21.333333 21.333333 0 0 1 0 42.666667H154.837333A26.709333 26.709333 0 0 1 128 869.333333v-437.333333c0-14.784 12.074667-26.666667 26.773333-26.666667h38.912a21.333333 21.333333 0 0 1 0 42.666667H170.666667z"
								fill="#515151" p-id="2333"></path>
						</svg>
						<text>{{commentItem.count_approve}}</text>
					</view>
				</view>
				<view class="content">{{commentItem.content}}</view>
			</view>
		</view>
		<view class="end">
			-End-
		</view>
	</view>
</template>

<script>
	export default {
		name: "Comment",
		props: {
			comment: Object,
		},
		data() {
			return {

			};
		},
		methods: {
			sendTime(t) {
				t *= 1000;
				let now = new Date();
				let n = (now.getTime() - t) / 1000 / 60 / 60;
				// console.log(t,now.getTime(),n);
				if ((now.getTime() - t) / 1000 / 60 >= 60 && n < 24) {
					return Math.floor(n) + "小时前";
				} else if (n >= 24 && n < 240) {
					return Math.floor(n / 24) + "天前";
				} else if ((now.getTime() - t) / 1000 / 60 < 60) {
					return Math.floor((now.getTime() - t) / 1000 / 60) + "分钟前";
				} else if (n >= 240) {
					let now = new Date(t);
					return now.getFullYear() + "." + (now.getMonth() + 1) + "." + now.getDate();
					return
				} else {
					return "刚刚";
				}
			},
		}
	}
</script>

<style lang="less">
	.comment {
		margin-top: 4vw;

		.header {
			padding: 3vw;
			font-weight: bold;
			font-size: 30rpx;
		}

		.commentItem {
			display: flex;
			padding: 3vw;
			border-bottom: 2rpx solid #ddd;

			.avatar {
				width: 65rpx;
				height: 65rpx;
				border-radius: 50%;
			}

			.commentItem-info {
				flex: 1;
				margin-left: 2vw;

				.head {
					display: flex;
					width: 100%;
					justify-content: space-between;
					color: #bbb;
					font-size: 24rpx;

					.head-left {
						.send-time {
							font-size: 24rpx;
							transform: scale(0.8);
							display: block;
							transform-origin: center left;
							// color: #707070;
						}

						.user-name {
							color: #515151;
							font-size: 24rpx;
						}
					}

					.head-right {
						display: flex;
						align-items: center;
						padding-right: 2vw;

						svg {
							margin-right: 2vw;
						}
					}
				}

				.content {
					line-height: 60rpx;
					font-size: 30rpx;
					// color: #333;
				}
			}
		}

		.end {
			text-align: center;
			line-height: 80rpx;
		}
	}
</style>
